<template>
  <div class="navigation">
    <div class="navigation-item" v-for="(item,index) in navigation_list" :key="index">
      <img :src="item.icon" alt="">
      <span>{{item.text}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: ['navigation_list']
}
</script>
<style lang="scss" scoped>
.navigation {
  display: flex;
  flex-wrap: wrap;
  padding: 16px 1vw 0px 1vw;
  background: #fff;
  overflow: hidden;
  .navigation-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    margin-bottom: 16px;
    img {
      width: 40px;
      height: 40px;
      margin-bottom: 6px;
    }
    span {
      font-size: 12px;
    }
  }
}
</style>
